<template>
  <div class="page">
    <el-form ref="search"
             :model="search"
             label-width="120px">
      <el-row class="page-search">        
        <el-col :xs="24"
                :sm="12"
                :md="12"
                :lg="8">
          <el-form-item label="统计日期">
            <el-date-picker v-model="search.date"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24"
                :sm="12"
                :md="12"
                :lg="6"
                >
          <el-form-item label="设备名称">
            <el-input v-model="search.name"
                      placeholder="请输入设备名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24"
                :sm="12"
                :md="12"
                :lg="6">
          <el-form-item label="设备状态">
             <!-- <el-input v-model="search.enable"
                      placeholder="请输入状态"></el-input> -->
            <el-select v-model="search.enable"
                       placeholder="请选择">
              <el-option label="是"
                         :value="1"></el-option>
              <el-option label="否"
                         :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24"
                :sm="12"
                :md="12"
                :lg="4">
          <el-form-item>
            <el-button type="primary"
                       @click="onSearch">查询</el-button>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <el-row>
      <el-col :span="24">
        <div class="page-chart">
          <deviceChart :data="chartData"></deviceChart>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top:24px;">
      <el-col :span="24">
        <div class="page-tables">
          <el-table :data="deviceList"
                    border
                    style="width: 100%">
            <el-table-column prop="name"
                             label="设备名称"
                             width="180">
            </el-table-column>
            <el-table-column prop="type"
                             label="设备类型"
                             width="180">
            </el-table-column>
            <el-table-column prop="ip"
                             label="设备IP地址">
            </el-table-column>
            <el-table-column prop="address"
                             label="设备所在地址">
            </el-table-column>
            <el-table-column prop="productDate"
                             label="设备生产日期">
            </el-table-column>
          </el-table>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import deviceChart from "./components/deviceChart.vue";
import deviceRequest from "@/message/device/device.js";
import deviceChartRequest from "@/message/device/devieceChart.js";
import request from "@/message/api/request.js"; //这个request1表示从前端读取数据，request表示从后端获取数据

export default {
  name: "device",
  components: { deviceChart },
  data() {
    return {
      search: {
        date: [],
        name: "",
        state: 1
      },
      deviceList: [
        // { name: '美式水质检测仪', type: '整体', ip: '192.168.1.2', address: '闽江口', productDate: '2021-07-01' },
        // { name: '日式水质检测仪', type: '整体', ip: '192.168.1.3', address: '台江水务局', productDate: '2021-07-03' },
        // { name: '国产水质检测仪', type: '整体', ip: '192.168.1.4', address: '马尾水务局', productDate: '2021-06-01' },
        // { name: 'COD水质检测仪', type: 'COD', ip: '192.168.1.5', address: '台江步行街水域', productDate: '2021-05-01' },
        // { name: '漂浮物检测仪', type: '漂浮物', ip: '192.168.1.6', address: '三江口', productDate: '2021-06-25' },
        // { name: '病原体检测仪', type: '病原体', ip: '192.168.1.7', address: '三江口', productDate: '2021-05-26' },
        // { name: '国产水质检测仪', type: '整体', ip: '192.168.1.8', address: '闽江口', productDate: '2021-07-21' }
      ],
      chartData: [
        // { name: '美式水质检测仪', count: 30 },
        // { name: '日式水质检测仪', count: 130 },
        // { name: '国产水质检测仪', count: 83 },
        // { name: 'COD水质检测仪', count: 65 },
        // { name: '漂浮物检测仪', count: 77 },
        // { name: '病原体检测仪', count: 91 }
      ]
    };
  },
  methods: {
    onSearch() {
      //alert(1);
      this.getChartsData();
      this.getTableData();
    },
    getChartsData() {
      let chart = new deviceChartRequest();
      request(chart).then(res => {
        console.log(res.data);
        this.chartData = res.data;
      });
    },
    getTableData() {
      let table = new deviceRequest();
      request(table).then(res => {
        console.log(res);
        this.deviceList = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  padding: 30px;
  width: 100%;
  .page-search {
    min-height: 100px;
    padding-top: 20px;
    padding-bottom: 20px;
    .el-col{
      height: 60px;
    }
  }
  .page-charts {
    min-height: 100px;
  }
  .page-tables {
    min-height: 100px;
  }
}
</style>
